<template>
  <div class="view_main">
    <h1 style="font-size:3em"><span style="color:#ffcc33;font-size:1.5em">"硒"</span>都山水</h1>
    <span style="color:#b2b2b2">领略恩施风情，看遍硒都美景</span>
    <el-tabs
      :tab-position="tabPosition"
      style="min-height: 30em;border: 1px solid #eee;margin-top:2em"
      class="demo-tabs"
      tabPosition="left"
    >
      <el-tab-pane
        v-for="(item, index) in viewListData"
        :key="index"
        :label="item.name"
      >
        <div class="view_message">
          <h1>{{ item.name }}</h1>
          <img :src="item.imageUrl" alt="" />
          <el-rate
            v-model="item.rate"
            disabled
            show-score
            text-color="#ff9900"
            :score-template="item.level"
          />
          <div class="message_main">
            <div class="main_address">
              <span>地址：</span>
              <span>{{ item.address }}</span>
            </div>
            <div class="main_text">
              {{item.description}}
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { viewList } from "@/utils/fetch/api";
import { useStore } from "@/store/index"
export default defineComponent({
  name: "History",
  components: {},
  setup() {
    const store = useStore();


    const viewListData = ref<any>();
    const params = {
      pageNum: 1,
    };
    const refresh = async () => {
      const data = await viewList(params);
      viewListData.value = data.data.data;
      viewListData.value.forEach((item: any) => {
        item.rate = levelChange(item.level);
      });

      store.state.isLoading = false
    };

    const levelChange = (level: any) => {
      let i = 0;
      level.split("").forEach((item: any) => {
        item == "A" ? i++ : 1;
      });
      return i;
    };

    onMounted(() => {
      refresh();
    });

    return { viewListData };
  },
});
</script>

<style lang="less" scoped>
.view_main {
  background: white;
  .view_message {
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 3em;
    }
    img{
      max-width: 80%;
      max-height: 30em;
      margin-bottom: 1em;
    }
    .message_main {
      width: 100%;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      align-items: center;
      .main_text{
        width: 90%;
        margin-top: 1em;
        font-size: 2em;
        display: inline-block;
        text-indent: 2em;
        margin-bottom: 3em;
      }
    }
  }
}
</style>
